<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>薪资想过万，代码敲三遍</title>
	<!-- 第二步 引入 js 和css -->
	<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href=".//bootstrap/bootstrap-icons.css">
	<script src=".//bootstrap/bootstrap.min.js"></script>
	<style>
		#myToast {
			width: 200px;
			height: 50px;
			background-color: pink;
			line-height: 50px;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
		}
	</style>
</head>

<body>
	<!--  第一  准备好提示盒子 -->
	<div id="myToast">我是提示</div>
	<script>
		//  第三部
		const toastBox = document.querySelector('#myToast')
		const toast = new bootstrap.Toast(toastBox, {
			animation: true,   // 开启动画效果
			autohide: true,   //  是否自动隐藏
			delay: 3000   //  3秒后关闭   --  多少毫秒
		})
		toast.show()  //  调用  show方法
	</script>
</body>

</html>